<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五子棋对战 - 登录</title>
  <link rel="stylesheet" href="/css/login.css">
</head>

<body>
  <!-- 导航栏 -->
  <div class="nav">五子棋对战</div>


  <div class="login-container">
    <!-- 登录对话框 -->
    <div class="login-dialog">
      <h3>登录</h3>

      <!-- 用户名输入 -->
      <div class="row">
        <span>用户名</span>
        <input type="text" id="username" placeholder="请输入用户名">
      </div>

      <!-- 密码输入 -->
      <div class="row">
        <span>密码</span>
        <input type="password" id="password" placeholder="请输入密码">
      </div>

      <div class="button-row">
        <button id="submit" onclick="login()">登录</button>
        <button id="register" onclick="register()">注册</button>
      </div>
    </div>
  </div>


</body>

<!-- <script src="/js/jquery.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

  function register() {
    $.ajax({
      url: '/user/register',
      method: 'POST',
      data: {
        username: $('#username').val(),
        password: $('#password').val()
      },
      success: function (res) {
        console.log(res);
        if (res.code == 200) {
          // window.location.href = '/';
          alert('注册成功,请登录');
          window.location.href = 'login.html';
        } else {
          alert("注册失败");
        }
      }
    })
  }

  function login() {
    $.ajax({
      url: '/user/login',
      method: 'POST',
      data: {
        username: $('#username').val(),
        password: $('#password').val()
      },
      success: function (res) {
        console.log(res);
        if (res.code == 200 && res.data != null) {
          //弹出登录成功的提示框
          alert('登录成功');
          // localStorage.setItem('user', JSON.stringify(res.data));
          localStorage.setItem("user_token", res.data);
          window.location.href = 'game_hall.html';
        } else {
          alert(res.errmsg);
          $('#password').val("");
        }
      }
    });
  }
</script>

</html>